import React, { Component } from "react";

class Navbar extends Component{
    state={
        // isShow:true,
        numval:1000
    }
    render(){
        return (
            <div style={{
                background:"red",
            }}> 
       
                <button onClick={()=>{
                    console.log("自创达瓦达瓦",this.props.event);
                    this.props.event(this.state.numval)
                }}>点击按钮</button>
                <span>navbar</span>
            </div>
        )
    }
}
class Sidebar extends Component{
    render(){
        return (
            <div style={{
                background:"yellow",width:"200px"
            }}> 
            <ul>
                <li>1111</li>
                <li>1111</li>
                <li>1111</li>
                <li>1111</li>
                <li>1111</li>
                <li>1111</li>
                <li>23231sda</li>
            </ul>
               
            </div>
        )
    }
}
export default class App extends Component {
    state={
        isShow:true,
        num:200
    }
    handlerEvent=(val)=>{
        console.log("val",val);
 this.setState({
                isShow:!this.state.isShow,
                num:val
            })
    }
  render() {
    return (
      <div>
        <Navbar event={this.handlerEvent} />
        {this.state.isShow && <Sidebar />}
       <span>{this.state.num}</span>
      </div>
    );
  }
}
